<template>
	<view class="container">
		<view class="box">
			<view class="shouhuo">
				<view class="p">
					出入库单号 {{ViewData.name}}
				</view>
				<view class="p">
					状态 {{ViewData.state}}
				</view>
			</view>

			<view class="danju">
				<view class="p">
					关联单据 {{ViewData.origin}}
				</view>
				<view class="p">
					优先级 {{ViewData.priority}}
				</view>
			</view>

			<view class="leibie">
				<view class="p">
					作业类别 {{ViewData.op_type}}
				</view>

				<view class="p">
					作业类型 {{ViewData.picking_type_id}}
				</view>
			</view>

			<view class="ren">
				<view class="p">
					物流负责人 {{ViewData.user_id}}
				</view>

				<view class="p">
					公司 {{ViewData.company_id}}
				</view>
			</view>

			<view class="jieshou">
				<view class="p">
					接收 {{ViewData.partner_id}}
				</view>

				<view class="p">
					目的地 {{ViewData.location_dest_id}}
				</view>
			</view>

			<view class="date">
				<view class="p">
					安排日期 {{ViewData.scheduled_date}}
				</view>
				<view class="p">
					截止日期 {{ViewData.date_deadline}}
				</view>
			</view>
		</view>

		<view class="box">
			<view class="wuliu">

				<view class="p">
					付款方式 {{ViewData.x_studio_field_smbLy}}
				</view>
				<view class="p">
					物流运费 {{ViewData.x_studio_}}
				</view>
			</view>
			<view class="map">
				<view class="p">
					物流公司 {{ViewData.carrier_id}}
				</view>
				<view class="p">
					追踪参考 {{ViewData.carrier_tracking_ref}}
				</view>
				<view class="p">
					补货组 {{ViewData.group_id}}
				</view>
			</view>
			<view class="zhongliang">
				<view class="p">
					重量 {{ViewData.weight}}
				</view>
				<view class="p">
					运输重量 {{ViewData.shipping_weight}}
				</view>
			</view>
		</view>

		<view class="note">
			<view class="title">
				笔记
			</view>
			<view class="" v-html="ViewData.note">

			</view>
		</view>

		<view class="chanpin-box">
			<view class="title">
				作业
			</view>
			<view class="chanpin-item" v-for="(item,i) in zuoYeList" :key="i" @click="gotoChanpin_Xiangqing(item)">
				<view class="name">
					{{item.name}}
				</view>
				<view class="xuqiu">
					<view class="p">
						需求: {{item.product_uom_qty + ' ' + item.product_uom}}
					</view>
					<view class="p">
						完成: {{item.quantity_done === "" ? 0 : item.quantity_done + ' ' + item.product_uom}}
					</view>
				</view>
			</view>
		</view>

		<view class="img-box">
			<view class="title">
				图片
			</view>
			<view class="item-box">
				<image class="img" v-for="(item,i) in imgList" :src="base64(item)" :key="i" @click="checkSeeImg(i)">
				</image>
			</view>
		</view>

		<view class="btn-box">
			<view class="btn" @click="wanchengGongdan()">
				验证
			</view>
			<view class="btn" @click="_imgUpLoad()">
				上传图片
			</view>
			
			<view class="btn" @click="gotoXiugaiDingdan()">
				修改收货单
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from "vue"
	import {
		getShouHuoMessage,
		getShouHuoZuoyeList,
		getShouhuoYanzheng,
		getTupianList
	} from '@/api/shouhuo.js'

	import {
		getData
	} from '@/tools/tools.js'

	import {
		baseUrl
	} from '@/api/base_url.js'

	import {
		base64
	} from '@/tools/tools.js'

	const ViewData = ref({})
	const zuoYeList = ref({})
	const fromid = ref('')
	const checkData = ref(false)
	const imgList = ref([])

	const _getShouHuoMessage = (id) => {
		getShouHuoMessage(id).then((res) => {
			console.log(res);
			ViewData.value = res.result
		})
	}

	const _getShouHuoZuoyeList = (id) => {
		getShouHuoZuoyeList(id).then((res) => {
			console.log(res);
			zuoYeList.value = res.result
		})
	}

	const gotoChanpin_Xiangqing = (chanpin) => {

		let data = JSON.stringify(chanpin)
		checkData.value = true
		uni.navigateTo({
			url: `/model/shouhuoModel/shouHuo_ChanpinXiangqing?chanpin=${data}&fromid=${fromid.value}`
		})
	}
	const checkSeeImg = (index) => {

		// 生成完整图片地址数组
		const urls = imgList.value.map(item => base64(item.photo));
		uni.previewImage({
			current: index, // 指定当前显示图片索引
			urls: urls, // 所有图片地址数组
			loop: true, // 开启循环预览（可选）
			indicator: 'default' // 显示指示器（可选）
		});
	}


	const wanchengGongdan = () => {
		if (imgList.value.length == 0) {

			uni.showModal({
				title: '提示',
				content: '请先上传至少一张图片！'
			})

			return
		}


		getShouhuoYanzheng(fromid.value).then((res) => {
			console.log(res);
			if (res.status == '已完成验证') {
				uni.showToast({
					title: '已完成验证'
				})

				_getShouHuoZuoyeList(fromid.value)
				_getShouHuoMessage(fromid.value)
				_getTupianList(fromid.value)
			} else {
				uni.showToast({
					title: '请重试'
				})

				_getShouHuoZuoyeList(fromid.value)
				_getShouHuoMessage(fromid.value)
				_getTupianList(fromid.value)
			}
		})
	}

	const _getTupianList = (id) => {
		getTupianList(id).then((res) => {
			console.log(res);
			imgList.value = res.photo_list
		})
	}

	const _imgUpLoad = () => {
		uni.chooseImage({
			count: 9,
			success: async (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				console.log('选中文件路径：', tempFilePaths);

				// 公共请求参数
				const formData = {
					user_id: getData().id,
					record_id: fromid.value
				};

				try {
					// 创建上传任务数组
					const uploadTasks = tempFilePaths.map(filePath => {
						return new Promise((resolve, reject) => {
							uni.uploadFile({
								url: baseUrl +
									'/receipt_and_warehousing_xiangqing_upload_photo',
								filePath: filePath,
								name: 'photo',
								formData: formData,
								success: (res) => {
									if (res.statusCode === 200) {
										resolve(res);
									} else {
										reject(new Error('上传失败'));
									}
								},
								fail: reject
							});
						});
					});

					// 等待所有上传完成
					await Promise.all(uploadTasks);

					// 统一延迟刷新数据
					setTimeout(() => {
						_getShouHuoMessage(fromid.value);
						_getTupianList(fromid.value);
					}, 3000);

					uni.showToast({
						title: `成功上传${tempFilePaths.length}张`,
						icon: 'success'
					});
				} catch (error) {
					console.error('上传异常：', error);
					uni.showToast({
						title: '上传出现异常',
						icon: 'none'
					});
				}
			},
			fail: (err) => {
				console.error('选择图片失败：', err);
				uni.showToast({
					title: '图片选择失败',
					icon: 'none'
				});
			}
		});
	};

	function gotoXiugaiDingdan () {
		uni.navigateTo({
			url:`/model/shouhuoModel/shouHuo_xiugai?id=${fromid.value}`
		})
	}

	onLoad((option) => {
		fromid.value = option.id
		_getShouHuoZuoyeList(option.id)
		_getShouHuoMessage(option.id)
		_getTupianList(fromid.value)
	})

	onShow(() => {

		if (checkData.value) {
			setTimeout(() => {
				_getShouHuoZuoyeList(fromid.value)
				_getShouHuoMessage(fromid.value)
				_getTupianList(fromid.value)
			}, 1000)
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		min-height: 100vh;
		background-color: #f5f5f5;

		.box {
			background-color: white;
			padding: 10rpx;
			border: 1rpx solid gainsboro;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.shouhuo {

				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
				padding: 0 20rpx 10rpx 20rpx;
				border-bottom: 1rpx solid gainsboro;
			}

			.danju {
				padding: 10rpx 20rpx 10rpx 20rpx;
				border-bottom: 1rpx solid gainsboro;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}

			.leibie {
				border-bottom: 1rpx solid gainsboro;
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}

			.ren {
				border-bottom: 1rpx solid gainsboro;
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}

			.jieshou {
				border-bottom: 1rpx solid gainsboro;
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}

			.date {
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}

			.wuliu {
				padding: 0 20rpx 10rpx 20rpx;
				border-bottom: 1rpx solid gainsboro;
			}

			.map {
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
				border-bottom: 1rpx solid gainsboro;
			}

			.zhongliang {
				padding: 10rpx 20rpx 10rpx 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 10rpx;
			}
		}


		.note {
			background-color: white;
			margin-bottom: 20rpx;

			.title {
				text-align: center;
				border-bottom: 1rpx solid gainsboro;
				padding: 0 0 10rpx 0;
			}

			padding: 10rpx;
			border: 1rpx solid gainsboro;
			border-radius: 10rpx;
		}


		.chanpin-box {
			background-color: white;
			padding: 10rpx;
			border: 1rpx solid gainsboro;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;

			.title {
				text-align: center;
				padding-bottom: 10rpx;
				border-bottom: 1rpx solid gainsboro;
			}

			.chanpin-item {
				padding: 0 10rpx 0 10rpx;
				line-height: 50rpx;
				border-bottom: 1rpx solid gainsboro;

				.xuqiu {
					display: flex;
					justify-content: space-between;
				}
			}
		}

		.img-box {
			border-radius: 10rpx;
			padding: 10rpx;
			border: 1rpx solid gainsboro;
			background-color: white;

			.title {
				text-align: center;
				padding-bottom: 10rpx;
				border-bottom: 1rpx solid gainsboro;
			}

			.item-box {
				display: grid;
				gap: 10rpx;
				grid-template-columns: repeat(3, 1fr);
				padding-top: 10rpx;

				.img {
					width: calc(100%);
					height: 200rpx;
					padding: 1rpx;
					border: 1rpx solid gainsboro;
					margin-bottom: 1rpx;
				}
			}

			.noimg {
				padding: 60rpx 0;
				text-align: center;

			}
		}


		.btn-box {
			padding: 20rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;

			.btn {
				padding: 20rpx;
				text-align: center;
				color: white;
				background-color: #0891b2;
				border-radius: 10rpx;
			}
		}
	}
</style>